<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <add-address-dialog :data="false" @saveUserAddress="getData"></add-address-dialog>
        <choose-address v-if="false"></choose-address>
      </div>
      <div class="right"></div>
    </div>
    <div class="content">
      <el-table
        border
        :data="tableData"
        v-tableHeight="{bottomOffset: 80}"
        height="100px"
        ref="tableData"
        :loading="loading"
      >
        <el-table-column
          prop="receiveName"
          label="收货人"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="zipCode"
          label="邮编"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="city"
          label="城市"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          align="center"
          min-width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="isDefault"
          label="默认地址"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            <el-switch v-model="row.isDefault" @change="setRowDefault(row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="op"
          label="操作"
          align="left"
          min-width="150"
        >
          <template v-slot="{row}">
            <add-address-dialog :data="row" @saveUserAddress="getData" btn-text="修改" style="display: inline-block" class="mgr10"></add-address-dialog>
            <el-button type="danger" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
import {changeDefault, deleteAddress, getAddressList, setDefault} from "@/api/userAddress";
import AddAddressDialog from "@/views/userAddress/components/AddAddressDialog.vue";
import ChooseAddress from "@/views/userAddress/components/ChooseAddress";

export default {
  name: 'userAddressList',
  components: {ChooseAddress, AddAddressDialog},
  data(){
    return {
      queryParams: {

      },
      tableData: [],
      loading: false,
      total: 0,
    }
  },
  created() {
    this.getData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods: {
    getData(){
      this.loading = true
      getAddressList().then(res => {
        this.loading = false
        this.tableData = res.data
      })
    },
    del(row){
      this.$confirm('确认要删除该地址吗？', '请确认',{
        type: 'warning',
      })
        .then(()=>{
          deleteAddress(row.id)
            .then((res)=>{
              this.$sMsg(res.message)
              this.getData()
            })
        })
        .catch(()=>{})
    },
    setRowDefault(row){
      this.tableData.filter(item => item.id !== row.id)
        .forEach(item => item.isDefault = false)
      changeDefault({
        id: row.id,
        isDefault: row.isDefault
      })
        .then(res=>{
          this.$sMsg(res.message)
          this.getData()
        })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 20px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0px 0 0;
    margin-top: 10px;
  }

}
</style>
